<template>
    <div>
        <van-nav-bar
                title="添加客户"
                left-text="返回"
                left-arrow
                @click-left="onBack"
        />
        <van-cell-group>
            <van-switch-cell v-model="sfqy" :active-value="1" :inactive-value="2" title="是否启用" />
            <van-field
                    v-model="khmc"
                    label="客户名称"
                    placeholder="请输入客户名称"
                    required
            />
            <van-field
                    v-model="sj"
                    label="手机号码"
                    placeholder="请输入手机号码"
                    required
            />
            <van-field
                    label="城市"
                    v-model="addrSelectWord"
                    placeholder="输入关键字搜索"
                    disabled
                    @click="addrFocus"
            />
            <van-popup v-model="showPicker" position="top">
                <van-field
                        ref="addrKeyword"
                        v-model="addrWord"
                        @input="cityList"
                        placeholder="请输入关键字搜索"
                />
                <van-picker
                        show-toolbar
                        title="选择城市"
                        :columns="columns"
                        :item-height="35"
                        :visible-item-count="3"
                        @cancel="showPicker = false"
                        @confirm="onConfirm"
                />
            </van-popup>
            <van-field
                    v-model="dz"
                    label="地址"
                    type="textarea"
                    placeholder="请输入地址"
                    rows="1"
                    autosize
            />
            <van-button type="primary" size="large" @click="customerAdd">提交</van-button>
        </van-cell-group>
    </div>
</template>
<script>
  import { customerAdd, cityList } from '@/api'
  import { Field, Button, Toast, Cell, CellGroup, NavBar, RadioGroup, Radio, SwitchCell, Popup, Picker, DropdownMenu, DropdownItem } from 'vant'
  import { Select, Option } from 'element-ui'

  export default {
    components: {
      [Select.name]: Select,
      [Option.name]: Option,
      [Field.name]: Field,
      [Popup.name]: Popup,
      [Picker.name]: Picker,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [NavBar.name]: NavBar,
      [RadioGroup.name]: RadioGroup,
      [DropdownMenu.name]: DropdownMenu,
      [DropdownItem.name]: DropdownItem,
      [Radio.name]: Radio,
      [SwitchCell.name]: SwitchCell,
      [Button.name]: Button
    },
    data () {
      return {
        addrWord: '',
        addrSelectWord: '',
        showPicker: false,
        columns: [],
        sfqy: 1, // 是否启用
        khmc: '', // 客户名称
        addrId: '', // 省份城市
        addr: {}, // 省份城市
        csOptions: [],
        csLoading: false,
        dz: '', // 地址
        sj: '' // 手机号
      }
    },
    watch: {
      csOptions: {
        handler (value) {
          this.columns = []
          for (let i in value) {
            this.columns.push({
              text: value[i].qy + value[i].sf + value[i].cs,
              value: {sf: value[i].sf, cs: value[i].cs, qy: value[i].qy}
            })
          }
        },
        deep: true
      }
    },
    methods: {
      cityList (query) {
        let data = {keyword: this.addrWord}
        this.csLoading = true
        cityList(data).then((res) => {
          if (res.code === 200) {
            console.log(res)
            this.csOptions = res.data
          }
          this.csLoading = false
          this.showPicker = true
        })
      },
      customerAdd () {
        let data = {khmc: this.khmc, sfqy: this.sfqy, addr: this.addr, sj: this.sj, dz: this.dz}
        customerAdd(data).then((res) => {
          Toast(res.message)
          if (res.status === 'success') {
            this.$router.push({path: '/'})
          }
        }, (res) => {
          // Toast('服务器开小差')
        })
      },
      onBack () {
        this.$router.back()
      },
      csChange (e) {
        let item = this.csOptions[e]
        this.addr = {sf: item.sf, cs: item.cs, qy: item.qy}
      },
      onConfirm (value, index) {
        // console.log(value)
        // console.log(index)
        this.addr = value.value
        // this.addrWord = value.text
        this.addrSelectWord = value.text
        this.showPicker = false
        // Toast('当前值：${value}, 当前索引：${index}')
      },
      onCancel () {
        Toast('取消')
      },
      addrFocus () {
        this.showPicker = true
        this.$refs.addrKeyword.focus()
      }
    },
    mounted () {
        // this.focusCs()
    }
  }
</script>
